﻿
$(function () {
    let allObj = {}
    let userSwiperInter = null
    let jsjInter = null
    var t = null;
    $(window).load(() => {
        // 清除滚动定时
        if (userSwiperInter) {
            clearInterval(userSwiperInter)
        }

        // 清除假数据定时
        if (jsjInter) {
            clearInterval(jsjInter)
        }
        request({ src: "/common/v1/screen/screenData" }).then((res) => {
            allObj = res ? res : {}
            map()
            echarts_11();
            echarts_12();
            echarts_2();
            echarts_3();
            echarts_4();
            echarts_5();
            userSwiper();
            let { allUserNumber, activeNumberToday } = res

            // allUser
            var allUser = document.getElementById('allUser')
            var inUser = document.getElementById('inUser')
            // 加盟数  // 假数据
            allUser.innerHTML = `${(parseInt(allUserNumber) || 1) + 50000}`

            // 当前活跃门店  // 假数据
            inUser.innerHTML = `${(parseInt(activeNumberToday) || 1) + getRandomNumber(6500, 7000)}`
            jsjInter = setInterval(() => {
                inUser.innerHTML = `${(parseInt(activeNumberToday) || 1) + getRandomNumber(6500, 7000)}`
            }, 30000)

            $("#video").attr("src", res.video || "")
        })
        t = setTimeout(time(t), 1000);

    });

    function time(t) {
        clearTimeout(t);
        dt = new Date();
        var y = dt.getFullYear();
        var mt = dt.getMonth() + 1;
        var day = dt.getDate();
        var h = dt.getHours();
        var m = dt.getMinutes();
        var s = dt.getSeconds();
        document.getElementById("showTime").innerHTML = y + "年" + mt + "月" + day + "-" + h + "时" + m + "分" + s + "秒";
        t = setTimeout(time, 1000);
    }

    function map() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('map_1'));
        const { screenProvinceVos } = allObj

        screenProvinceVos.forEach((item) => {
            if (item.name === "四川") {
                item.value += 18833
            }
        })
        // 假数据
        screenProvinceVos.unshift(
            {
                name: "云南",
                value: 9905
            },
            {
                name: "贵州",
                value: 5257
            },
            {
                name: "重庆",
                value: 11566
            },
            {
                name: "甘肃",
                value: 661
            },
            {
                name: "青海",
                value: 12
            },
            {
                name: "新疆",
                value: 5
            },
            {
                name: "西藏",
                value: 9
            },
            {
                name: "内蒙古",
                value: 2
            },
            {
                name: "宁夏",
                value: 33
            },
            {
                name: "陕西",
                value: 199
            },
            {
                name: "湖北",
                value: 199
            },
            {
                name: "湖南",
                value: 799
            },
            {
                name: "广西",
                value: 799
            },
            {
                name: "山东",
                value: 99
            },
            {
                name: "黑龙江",
                value: 261
            },
            {
                name: "辽宁",
                value: 36
            },
            {
                name: "吉林",
                value: 23
            },
            {
                name: "北京",
                value: 56
            },
            {
                name: "天津",
                value: 64
            },
            {
                name: "河北",
                value: 9
            },
            {
                name: "河南",
                value: 4
            },
            {
                name: "山西",
                value: 16
            },
            {
                name: "广东",
                value: 99
            },
            {
                name: "台湾",
                value: 2
            },
            {
                name: "江苏",
                value: 4
            },
            {
                name: "安徽",
                value: 68
            },
            {
                name: "浙江",
                value: 55
            },
            {
                name: "福建",
                value: 53
            },
            {
                name: "江西",
                value: 63
            },
            {
                name: "上海",
                value: 79
            },
            {
                name: "海南",
                value: 45
            },
            // {
            //     name: "海南港岛",
            //     value: 445
            // },
        )

        option = {
            // title: {
            //     text: '实时行驶车辆',
            //     // subtext: 'data from PM25.in',
            //     // sublink: 'http://www.pm25.in',
            //     left: 'center',
            //     textStyle: {
            //         color: '#fff'
            //     }
            // },
            tooltip: {
                trigger: 'item',
                show: true,
                formatter: function (params) {
                    return params.name + ' : ' + params.value;
                },
                textStyle: {
                    color: '#fff' // 字体颜色
                }
            },

            visualMap: {
                min: 0,
                max: 1000,
                left: 'center',
                top: 'top',
                text: ['高', '低'], // 文字，默认为数值文本
                calculable: false,
                color: ['#f3255a', '#0091fa'], // 颜色渐变
                show: false,
            },

            series: [
                {
                    type: 'map',
                    mapType: 'china',
                    roam: false, // 是否开启鼠标缩放和平移漫游
                    data: screenProvinceVos,
                    // 设置地图区域的样式
                    itemStyle: {
                        normal: {
                            areaColor: '#4c60ff',// 区域颜色
                            borderColor: '#002097' // 区域边框颜色
                        },
                        emphasis: {
                            areaColor: '#fff' // 鼠标悬浮区域颜色
                        }
                    },

                    textStyle: {
                        color: '#fff'
                    }
                }
            ]
        };

        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }

    function echarts_11() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('fb1'));

        const { screenDeviceVos } = allObj
        let templateArr = []
        let data = screenDeviceVos
        screenDeviceVos.forEach((item, index) => {
            // 假数据
            switch (item.name) {
                case "IOS":
                    data[index].value += 22244
                    break;
                case "安卓":
                    data[index].value += 27756
                    break;
                default:
                    break;
            }
            templateArr.push(item.name || "")
        })

        option = {
            title: [{
                text: '安卓和IOS占比',
                left: 'center',
                textStyle: {
                    color: '#fff',
                    fontSize: '16'
                }
            }],
            tooltip: {},
            legend: {
                top: '75%',
                itemWidth: 10,
                itemHeight: 10,
                data: templateArr,
                textStyle: {
                    color: 'rgba(255,255,255,.5)',
                    fontSize: '12',
                }
            },
            series: [
                {
                    name: '安卓和OS占比',
                    type: 'pie',
                    center: ['50%', '42%'],
                    radius: ['40%', '60%'],
                    color: ['#0091fa', '#f3255a'],
                    label: { show: false },
                    labelLine: { show: false },
                    data: screenDeviceVos
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }

    function echarts_12() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('fb2'));
        const { screenWorkVos } = allObj
        let templateArr = []
        let data = screenWorkVos
        screenWorkVos.forEach((item, index) => {
            // 本地假数据
            // switch (item.name) {
            //     case "自由职业者":
            //         data[index].value += 12814
            //         break;
            //     case "内容运营":
            //         data[index].value += 1288
            //         break;
            //     case "新媒体运营":
            //         data[index].value += 5996
            //         break;
            //     case "人力资源专员/助理":
            //         data[index].value += 6458
            //         break;
            //     case "主持人/DJ":
            //         data[index].value += 9951
            //         break;
            //     case "其他":
            //         data[index].value += 9925
            //         break;
            // }

            //线上假数据
            switch (item.name) {
                case "客服主管":
                    data[index].value += 12814
                    break;
                case "Android":
                    data[index].value += 1288
                    break;
                case "COO":
                    data[index].value += 5996
                    break;
                case "iOS":
                    data[index].value += 6458
                    break;
                case "Java":
                    data[index].value += 9951
                    break;
                case "其他":
                    data[index].value += 9925
                    break;
            }
            templateArr.push(item.name || "")
        })

        option = {
            title: [{
                text: '职业占比',
                left: 'center',
                textStyle: {
                    color: '#fff',
                    fontSize: '16'
                }

            }],
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)",
                position: function (p) {   //其中p为当前鼠标的位置
                    return [p[0] + 10, p[1] - 10];
                }
            },
            legend: {
                top: '75%',
                itemWidth: 10,
                itemHeight: 10,
                data: templateArr,
                textStyle: {
                    color: 'rgba(255,255,255,.5)',
                    fontSize: '12',
                }
            },
            series: [
                {
                    name: '职业占比',
                    type: 'pie',
                    center: ['50%', '42%'],
                    radius: ['40%', '60%'],
                    color: ['#065aab', '#066eab', '#0682ab', '#0696ab', '#f3255a', '#666'],
                    label: { show: false },
                    labelLine: { show: false },
                    data: screenWorkVos
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }

    function echarts_2() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart2'));
        const { screenAgeVos } = allObj
        const color = ['#065aab', '#f3255a', '#0091fa', '#066eab', '#0682ab', '#0696ab', '#666']
        let data = screenAgeVos
        let nameArr = []
        let valueArr = []

        screenAgeVos.forEach((item, index) => {
            // 假数据
            switch (item.name) {
                case "18-24":
                    data[index].value += 8695
                    break;
                case "25-30":
                    data[index].value += 14458
                    break;
                case "31-35":
                    data[index].value += 14814
                    break;
                case "36-40":
                    data[index].value += 9996
                    break;
                case "41-50":
                    data[index].value += 4951
                    break;
                case "50以上":
                    data[index].value += 4159
                    break;
                case "未知":
                    data[index].value += 925
                    break;
                default:
                    break;
            }
            nameArr.push(item.name || "")
            valueArr.push({ value: item.value || "", itemStyle: { color: color[index] } })
        })

        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: { type: 'shadow' }
            },
            grid: {
                left: '0%',
                top: '10px',
                right: '0%',
                bottom: '4%',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                data: nameArr,
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(255,255,255,.1)",
                        width: 1,
                        type: "solid"
                    },
                },

                axisTick: {
                    show: false,
                },
                axisLabel: {
                    interval: 0,
                    // rotate:50,
                    show: true,
                    splitNumber: 15,
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: '12',
                    },
                },
            }],
            yAxis: [{
                type: 'value',
                axisLabel: {
                    //formatter: '{value} %'
                    show: true,
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: '12',
                    },
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(255,255,255,.1)",
                        width: 1,
                        type: "solid"
                    },
                },
                splitLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,.1)",
                    }
                }
            }],
            series: [
                {
                    type: 'bar',
                    data: valueArr,
                    barWidth: '35%', //柱子宽度
                    // barGap: 1, //柱子之间间距
                    itemStyle: {
                        normal: {
                            // color: '#f3255a',
                            opacity: 1,
                            barBorderRadius: 5,
                        }
                    }
                }

            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }

    function echarts_3() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart3'));

        const { screenSexVos } = allObj
        const color = ['#0091fa', '#f3255a', '#666',]
        let data = screenSexVos
        let nameArr = []
        let valueArr = []
        screenSexVos.forEach((item, index) => {
            // 假数据
            switch (item.name) {
                case "男":
                    data[index].value += 24559
                    break;
                case "女":
                    data[index].value += 16457
                    break;
                case "未知":
                    data[index].value += 9996
                    break;
                default:
                    break;
            }
            nameArr.push(item.name || "")
            // {value: 70, itemStyle: {color: '#ca8622'}}
            valueArr.push({ value: item.value || "", itemStyle: { color: color[index] } })
        })

        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: { type: 'shadow' }
            },
            grid: {
                left: '0%',
                top: '10px',
                right: '0%',
                bottom: '0%',
                // width: "100%",
                containLabel: true
            },
            yAxis: [{
                type: 'category',
                data: nameArr,
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(255,255,255,.1)",
                        width: 1,
                        type: "solid"
                    },
                },

                axisTick: {
                    show: false,
                },
                axisLabel: {
                    interval: 0,
                    // rotate:50,
                    show: true,
                    splitNumber: 15,
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: '12',
                    },
                },
            }],
            xAxis: [{
                type: 'value',
                axisLabel: {
                    //formatter: '{value} %'
                    show: true,
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: '12',
                    },
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(255,255,255,.1)",
                        width: 1,
                        type: "solid"
                    },
                },
                splitLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,.1)",
                    }
                }
            }],
            series: [
                {
                    type: 'bar',
                    data: valueArr,
                    barWidth: '35%', //柱子宽度
                    // barGap: 1, //柱子之间间距
                    itemStyle: {
                        normal: {
                            // color: ['#0184d5', '#065aab', '#f3255a'],
                            color: '#0184d5',
                            opacity: 1,
                            barBorderRadius: 5,
                        }
                    }
                }

            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }

    function echarts_4() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart4'));
        const { activeNumberTodayList, activeNumberYesterdayList, activeNumberToday } = allObj

        clearTimeout(t);
        dt = new Date();
        var h = dt.getHours();

        // 昨日
        for (let index = 0; index < 24; index++) {
            activeNumberYesterdayList[index] += getRandomNumber(2000, 2500)
        }

        // 今日
        for (let index = 0; index < h - 1; index++) {
            activeNumberTodayList[index] += getRandomNumber(2000, 2600)
        }

        activeNumberTodayList[h - 1] = (parseInt(activeNumberToday) || 1) + 2000

        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    lineStyle: {
                        color: '#dddc6b'
                    }
                }
            },
            legend: {
                top: '0%',
                data: ['昨日', '今日'],
                textStyle: {
                    color: 'rgba(255,255,255,.5)',
                    fontSize: '12',
                }
            },
            grid: {
                left: '10',
                top: '30',
                right: '10',
                bottom: '10',
                containLabel: true
            },

            xAxis: [{
                type: 'category',
                boundaryGap: false,
                axisLabel: {
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: 12,
                    },
                },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.2)'
                    }
                },
                data: ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23']
            }, {
                axisPointer: { show: false },
                axisLine: { show: false },
                position: 'bottom',
                offset: 20,
            }],

            yAxis: [{
                type: 'value',
                axisTick: { show: false },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.1)'
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: 12,
                    },
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255,255,255,.1)'
                    }
                }
            }],
            series: [
                {
                    name: '昨日',
                    type: 'line',
                    smooth: true,
                    symbol: 'circle',
                    symbolSize: 5,
                    showSymbol: false,
                    lineStyle: {
                        normal: {
                            color: '#0091fa',
                            width: 2
                        }
                    },
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(1, 132, 213, 0.4)'
                            }, {
                                offset: 0.8,
                                color: 'rgba(1, 132, 213, 0.1)'
                            }], false),
                            shadowColor: 'rgba(0, 0, 0, 0.1)',
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#0091fa',
                            borderColor: 'rgba(221, 220, 107, .1)',
                            borderWidth: 12
                        }
                    },
                    data: activeNumberYesterdayList || []
                },
                {
                    name: '今日',
                    type: 'line',
                    smooth: true,
                    symbol: 'circle',
                    symbolSize: 5,
                    showSymbol: false,
                    lineStyle: {

                        normal: {
                            color: '#f3255a',
                            width: 2
                        }
                    },
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(243, 37, 90, .3)'
                            }, {
                                offset: 0.8,
                                color: 'rgba(243, 37, 90, .3)'
                            }], false),
                            shadowColor: 'rgba(243, 37, 90, .3)',
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#f3255a',
                            borderColor: 'rgba(221, 220, 107, .1)',
                            borderWidth: 12
                        }
                    },
                    data: activeNumberTodayList || []
                },
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }

    function echarts_5() {
        var myChart = echarts.init(document.getElementById('echart5'));
        const { screenProvinceVos } = allObj

        let data = screenProvinceVos.slice(0, 5)
        const color = ['#0091fa', '#0682ab', '#f3255a', '#066eab', '#066eab']
        let nameArr = []
        let valueArr = []
        data.forEach((item, index) => {
            nameArr.push(item.name || "")
            valueArr.push({ value: item.value || "", itemStyle: { color: color[index] } })
            // valueArr.push(item.value || "")
        })

        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },

            grid: {
                left: '0%',
                top: '10px',
                right: '0%',
                bottom: '2%',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                data: nameArr,
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(255,255,255,.1)",
                        width: 1,
                        type: "solid"
                    },
                },

                axisTick: {
                    show: false,
                },
                axisLabel: {
                    interval: 0,
                    show: true,
                    splitNumber: 15,
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: '12',
                    },
                },
            }],
            yAxis: [{
                type: 'value',
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: '12',
                    },
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(255,255,255,.1	)",
                        width: 1,
                        type: "solid"
                    },
                },
                splitLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,.1)",
                    }
                }
            }],
            series: [{
                type: 'bar',
                data: valueArr,
                barWidth: '35%', //柱子宽度
                itemStyle: {
                    normal: {
                        color: '#f3255a',
                        opacity: 1,
                        barBorderRadius: 5,
                    }
                }
            }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }

    function userSwiper() {
        const userSwiper = document.getElementById("userSwiper")
        const { screenUserVos } = allObj
        let templateDate = screenUserVos ? screenUserVos : []
        userSwiperInter = setInterval(() => {
            const newData = changeData(templateDate) || templateDate
            let obj = []
            newData.forEach((item) => {
                obj.push(`<li><span>${item.name}</span><span>${item.sex}</span><span>${item.workName}</span></li>`)
            })
            userSwiper.innerHTML = obj.join("")
        }, 2000)
    }

    function changeData(data) {
        const firstItem = data.slice(0, 1)
        data.shift()
        data.push(firstItem[0])
        return data
    }

    async function request(params) {
        const { src } = params
        // const BEST_URL = "http://192.168.110.101:8061"   //本地
        const BEST_URL = "https://pay.moujiang.com/apiPc"   //线上
        const res = await $.ajax({
            url: `${BEST_URL}${src}`,        // 请求的 URL
            type: 'GET',            // 请求类型 (GET, POST, PUT, DELETE, etc.)
            dataType: 'json',       // 预期服务器返回的数据类型 (json, xml, html, text)
            data: {},// 发送到服务器的数据 (可以是对象或字符串)
        })

        const { code, data } = res
        if (code !== 200) {
            return false
        }

        return data
    }

    // 随机数
    function getRandomNumber(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }
})

